在前一篇我们介绍了游戏架构，分别有Splash、Menu、GamePlay、 GameOver、Rank五个游戏画面，所以我们今天要学习的部分就是先把游戏的全部画面的空壳建立起来，先让画面的壳能按照我们期望的游戏顺序显示出来。

这些画面在游戏中我们有时候又会称作Scene，也就是场景，有时候游戏也会制作很多关卡，就会制作不同的Scene场景来载入，所以通常不会一个场景一镜到底，都会依需求去切换到想要呈现的画面。

在KorGE里也有提供这样的类别Scene，让你能游戏中使用不同的场景进行切换。
新建场景
这时候我们就可以开始动手开工了，你可以在IntelliJ的专案资料夹/src/commonMain/kotlin/再新建一个资料夹命名为scene，把画面相关的档案都放在/src/commonMain/kotlin /scene，然后按下滑鼠右键
New →Korge Scene →New Korge Scene →輸入檔名

依序建立五个场景画面：Splash、Menu、GamePlay、 GameOver、Rank

Splash.kt
我们就先挑第一个开头产景Splash来说明，由IntelliJ IDE产生出来的场景程式码会自动继承Scene()，还有顺便带入负责进行初始话的函式fun Container.sceneInit( )，而程式码的注解也告诉你，场景的初始就写在这里头了。

package scene

import com.soywiz.korge.scene.Scene
import com.soywiz.korge.view.Container

class Splash(
) : Scene() {
suspend override fun Container.sceneInit() {
// @TODO: Scene initialization here
}
}
但是光产生场景还是不行，因为还记得我们的程式入口是从main.kt开始，所以我们要来开始改写main.kt的程式，让程式的进入点改为Splash场景。

重写main.kt

import com.soywiz.korge.Korge
import com.soywiz.korge.scene.Module
import com.soywiz.korim.color.Colors
import com.soywiz.korim.color.RGBA
import com.soywiz.korinject.AsyncInjector
import com.soywiz.korma.geom.SizeInt
import scene.*

suspend fun main() = Korge(Korge.Config(module = ConfigModule))

object ConfigModule : Module() {
override val bgcolor: RGBA = Colors["#2b2b2b"]
override val size = SizeInt(512, 512)

override val mainScene = Splash::class
override suspend fun AsyncInjector.configure() {

mapPrototype { Splash() }

mapPrototype { Menu() }

mapPrototype { GamePlay() }

mapPrototype { GameOver() }

mapPrototype { Rank() }

}

}
(1) 将第一天Day01写的范例进行改写

Korge(width = 512, height = 512, bgcolor = Colors["#2b2b2b"])

因为Korge可以藉由Korge.Config传入一个Module来设定这些视窗的属性。因此改写成以下:

Korge(Korge.Config(module = ConfigModule))

(2)把视窗的属性，全部放在ConfigModule去设定，会是跟第一天写的范例达成一样的效果

object ConfigModule : Module() {
override val bgcolor: RGBA = Colors["#2b2b2b"]
override val size = SizeInt(512, 512)
}
(3)把mainScene这个入口Scene设定给Splash::class，这样开始执行后才会帮我们导向Splash场景

override val mainScene = Splash::class

(4) 使用AsyncInjector.configure()，算是KorGE帮忙写好的一个依赖注射的方法，让你不用特别每个场景都要额外去再进行建立新的object的动作，所以照着官方做法，将每个场景都用mapPrototype加进去，让这些场景被呼叫时，就会自动帮你生成需要的物件了。

override suspend fun AsyncInjector.configure() {
mapPrototype { Splash() }
mapPrototype { Menu() }
mapPrototype { GamePlay() }
mapPrototype { GameOver() }
mapPrototype { Rank() }
}
练习切换Scence
前面一个步骤已经将main.kt重写让程式入口导入到Splash了，这时候我们来试着在每个场景都加一个按钮来进行场景的切换，就能先假装我们好像真的已经打开游戏，重投玩到尾的感觉(只是里头完全还没内容就是了…)

(1)将所有场景都加上文字跟按钮，以Splash.kt为例

class Splash : Scene() {
val textPos = Point(128, 128)
val buttonWidth = 256.0
val buttonHeight = 32.0
val buttonPos = Point(128, 128 + 32)

override suspend fun Container.sceneInit() {
text(&quot;I'm in ${Splash::class.simpleName}&quot;) {
    position(textPos)
}
textButton(buttonWidth, buttonHeight) {

text = &quot;Go to Menu&quot;

position(buttonPos)

onClick {

launchImmediately { sceneContainer.changeTo&lt;Menu&gt;() }

}

}


}

}
(2)透过文字来显示目前是在哪一个Scene，我们使用text类别，也要告诉KorGE座标位置position(textPos)。

val textPos = Point(128, 128)
text(“I’m in ${Splash::class.simpleName}”) {
position(textPos)
}
(3)透过按钮的触发，去切换到下一个要去Scene，这里始用textButton，一样也要帮按钮命名，titile=“Go to Menu”，一样要给座标位置position(buttonPos)，最后onClick的触发动作将场景切给Menu。

textButton(buttonWidth, buttonHeight) {
text = “Go to Menu”
position(buttonPos)
onClick {
launchImmediately { sceneContainer.changeTo

() }
}
}
(4)执行mygame →Tasks →korge-run →runJvm
看到我们在程式写的text跟button都显示在画面上了！也告诉你正在Splash场景。

(5)按下Go to Menu按钮，进到下一个Menu场景，看到显示I’m in Menu，而按钮也改为显示Go to GamePlay了！

(6)最后全部场景都改写好的执行结果!
总结
以Splash 開始，Menu → GamePlay → GameOver →Rank再回到Menu这样的循环。也就会呼应我们前一篇介绍的游戏架构的流程。
最后应该只要示范Splash.kt的程式就行了吧，相信Menu切换到GamePlay之后的游戏流程各位都能以此类推。之后的教学将会慢慢在各个场景上加上游戏需要的东西啰！

上一篇：[Kotlin写游戏教程二]先动脑想想要做什么、跟怎么做
下一篇：2021年6月15日Bentley 软件公司宣布收购SPIDA-云资讯